<template>
    <div class="v-data">
        <el-row class="v-data-info">
            <el-col :span="12" :offset="6" style="padding: 30px 0;">
                <el-form ref="pwd" :rules="ruleCustom" :model="pwd">
                    <el-form-item prop="old_password">
                        <el-input v-model="pwd.original_password" placeholder="请输入旧密码">
                            <span slot="prepend">旧密码</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="pwd.password" placeholder="请输入新密码">
                            <span slot="prepend">新密码</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password_confirmation">
                        <el-input v-model="pwd.password_confirmation" placeholder="再次输入新密码">
                            <span slot="prepend">确认密码</span>
                        </el-input>
                    </el-form-item>
                </el-form>
                <p class="text-center">
                    <el-button type="primary" @click="submit('pwd')">提交</el-button>
                </p>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {changePwd} from "@/api";

    export default {
        data() {
            // 密码验证
            const validatePass = (rule, value, callback) => {
                if (value.length < 6 || value.length > 12) {
                    callback(new Error('新密码为6-12位'));
                } else {
                    if (this.pwd.password_confirm !== '') {
                        // 对第二个密码框单独验证
                        this.$refs.pwd.validateField('password_confirm');
                    }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('确认密码不能为空'));
                } else if (value !== this.pwd.password) {
                    callback(new Error('两次输入的密码不一致'));
                } else {
                    callback();
                }
            };
            return {
                pwd: {
                    original_password: '',
                    password: '',
                    password_confirmation: ''
                },
                username: '',
                //验证信息
                ruleCustom: {
                    original_password: [
                        {required: true, message: '原密码不能为空', trigger: 'blur'}
                    ]
                    , password: [
                        {required: true, message: '新密码不能为空', trigger: 'blur'},
                        {validator: validatePass, trigger: 'blur'}
                    ]
                    , password_confirmation: [
                        {required: true, message: '确认密码不能为空', trigger: 'blur'},
                        {validator: validatePassCheck, trigger: 'blur'}
                    ]
                }
            }
        }
        , methods: {
            //确认修改
            submit(form) {
                this.$submit(this, form, () => {
                    this.$emit('loading', true);
                    changePwd(
                      this.pwd
                      , () => {
                        this.$refs[form].resetFields();
                        this.$emit('loading', false);
                    }, () => {
                        this.$emit('loading', false);
                    })
                });
            }
        }
    }
</script>
